<template>
  <div class="wrap">
    <div class="mainTitle">活动管理 &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;促活管理&nbsp;&nbsp;/&nbsp;&nbsp;创建活动</div>
    <div class="tishi">
      <span style="font-size:16px;font-weight:bold">配置预览图</span>
      大小:345×140px 图片大小简易
    </div>
    <el-upload
      class="avatar-uploader"
      :class="{hide:hideUpload}"
      action="http://10.12.204.208:10688/api/fileUpload"
      list-type="picture-card"
      :limit="3"
      accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-error="handleFail"
      :on-change="handleChange"
    >
      <el-dialog :visible.sync="dialogVisible" append-to-body>
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
      <span class="title">上传banner</span>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: [],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    // 上传图片类
    handleFail() {
      layer.open({
        content: "图片上传失败，请重新上传",
        skin: "msg",
        time: 1, //1秒后自动关闭
      });
    },
    handleSuccess(res, file, fileList) {
      console.log("上传成功");
      console.log(res);
      // console.log(this.imgData)
      let imgUrl = res.data.filePath;
      this.imgUrl.push(imgUrl);
      console.log(this.imgUrl);
    },
    beforeUpload(file) {
      let newName = file.name.substring(file.name.lastIndexOf("."));
      let islt1M = file.size / 1024 / 1024 < 1000;
      if (!islt1M) {
        this.$notify({
          title: "错误",
          message: "图片尺寸限制为345：140，大小不可超过1M",
          type: "error",
        });
        return false;
      } else {
        const isSize = new Promise((resolve, reject) => {
          // const width = 345;
          // const height = 140;
          const _URL = window.URL || window.webkitURL;
          const img = new Image();
          img.onload = () => {
            let name =
              file.name.substring(0, file.name.lastIndexOf(".")) +
              "_" +
              img.width +
              "_" +
              img.height +
              newName;
            file = new File([file], name);
            const valid = this.$commit.ImageRestrictions(
              img.width,
              img.height,
              1
            );
            valid ? resolve() : reject();
          };
          img.src = _URL.createObjectURL(file);
        }).then(
          () => {
            return file;
          },
          () => {
            this.$notify({
              title: "错误",
              message: "图片尺寸限制为345：140，大小不可超过1M",
              type: "error",
            });
            return Promise.reject();
          }
        );
        return isSize;
      }
    },
    handleRemove(file, fileList) {
      console.log(file);
      console.log(fileList);
      //   console.log(file, fileList);
      // console.log(file.name)
      // var name = file
      // if(this.imgUrl.includes(name)){
      //     alert("可是劳动纠纷")
      // }else{
      //     alert("asdfsaf")
      // }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log(this.dialogImageUrl);
    },
    handleChange(file, fileList) {
        // console.log("执行")
      this.imgUrl = fileList.slice(-3);
      console.log("下面是")
      console.log(this.imgUrl)
    },
  },
};
</script>

<style scoped>
.title {
  color: #409eff;
}
.wrap {
  width: 96%;
  margin: 0 auto;
}
/deep/ .el-upload--picture-card {
  width: 345px;
  height: 140px;
}
/deep/ .el-upload-list__item {
  width: 345px;
  height: 140px;
}
/deep/ .el-upload-list__item {
  margin-right: 40px;
  box-shadow: 0px 2px 22px rgba(0, 0, 0, 0.2);
}
.mainTitle {
  margin-top: 40px;
  margin-bottom: 20px;
  font-size: 16px;
}
.tishi {
  margin-bottom: 20px;
  font-size: 14px;
  margin-top: 40px;
}

.uoloadSty .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.disUoloadSty .el-upload--picture-card {
  display: none; /* 上传按钮隐藏 */
}
/deep/ .el-upload--picture-card {
  border: 0;
  box-shadow: 0px 2px 22px rgba(0, 0, 0, 0.2);
}
</style>